<template>
  <div class="app-container">
    <div class="filter-container">
      {{ $t("DailyDataSummary.channel") }}:

      <el-select
        v-model="channelId"
        @change="changeChannel"
        style="margin-right: 10px"
      >
        <el-option
          v-for="item in channelList"
          :key="item.id"
          :label="item.channename"
          :value="item.id"
        />
      </el-select>
      {{ $t("DailyDataSummary.serverlist") }}:
      <el-select
        v-model="selectServer"
        filterable
        clearable
        placeholder="请选择"
        @change="onSelectServerListChange"
        style="margin-right: 10px"
      >
        <div>
          <el-option
            v-for="item in serverList"
            :key="item.serverId"
            :label="item.serverName"
            :value="item.serverId"
          >
          </el-option>
        </div>
      </el-select>
      <el-button v-waves type="primary" icon="el-icon-search" @click="getList">
        {{ $t("table.search") }}
      </el-button>
      <el-button
        v-waves
        :loading="downloadLoading"
        type="primary"
        icon="el-icon-download"
        @click="handleDownload"
      >
        {{ $t("table.export") }}
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      :span-method="objectSpanMethod"
      @sort-change="sortChange"
      show-summary
      :summary-method="getSummaries"
    >
      <el-table-column :label="getOpenServerTime()" align="center">
        <el-table-column
          :label="$t('OpenServerData.datecol')"
          align="center"
          width="200px"
        >
          <template slot-scope="{ row }">
            <span> {{ getShowTime(row) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('OpenServerData.registerNum')"
          width="105px"
          align="center"
        >
          <template slot-scope="{ row }">
            <span> {{ row.registerNum }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('OpenServerData.createNum')"
          width="105px"
          align="center"
        >
          <template slot-scope="{ row }">
            <span> {{ row.createNum }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('OpenServerData.loginNum')"
          width="105px"
          align="center"
        >
          <template slot-scope="{ row }">
            <span> {{ row.loginNum }}</span>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('OpenServerData.chargeMoney')"
          width="105px"
          align="center"
        >
          <template slot-scope="{ row }">
            <span> {{ row.chargeMoney }}</span>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('OpenServerData.newChargePeople')"
          width="105px"
          align="center"
        >
          <template slot-scope="{ row }">
            <span> {{ row.newChargePeople }}</span>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('OpenServerData.arpu')"
          width="105px"
          align="center"
        >
          <template slot-scope="{ row }">
            <span> {{ row.arpu }}</span>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('OpenServerData.newChargePercent')"
          width="120px"
          align="center"
        >
          <template>
            <span> 每小时不需统计</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script lang="ts">
//开服当天数据
import Pagination from "@/components/Pagination/index.vue";
import { ChannelConfig } from "@/config/ChannelConfig";
import { HttpClient } from "@/httpclient/HttpClient";
import { DemoExcel } from "@/store/model/DemoExcel";
import { DeviceModel } from "@/store/model/DeviceModel";
import { OpenServerData } from "@/store/model/OpenServerData";
import { ZoneModel } from "@/store/model/ZoneModel";
import { formatJson } from "@/utils";
import { DateUtil } from "@/utils/DateUtil";
import { exportJson2Excel } from "@/utils/excel";
import { Logger } from "@/utils/Logger";
import { Component, Vue } from "vue-property-decorator";

@Component({
  name: "OpenServerData",
  components: {
    Pagination,
  },
  filters: {},
})
export default class extends Vue {
  private tableKey = 0;
  private list: OpenServerData[] = [];
  private total = 0;
  private listLoading = true;
  private channelId: number = 0;

  private zoneId: number = 0;
  private zoneList: Array<ZoneModel> = ZoneModel.modelList;

  private deviceType: number = DeviceModel.DeviceType.All;

  private startTime: number = DateUtil.now();
  private endTime: number = DateUtil.now();

  //列表查询选项
  private listQuery = {
    page: 1, //第几页
    limit: 20, //一页多少个
    sort: "+id", //排序方式
  };

  private dialogFormVisible = false; //dialog是否显示
  private rules = {};

  private downloadLoading = false;
  private tempShowData: DemoExcel = new DemoExcel();

  private serverList: Array<ZoneModel> = ZoneModel.selectList;

  private selectServer: number = null;
  private serverListAllChecked: boolean;

  private channelList: Array<ChannelConfig> = [];

  created() {
    this.channelList = ChannelConfig.getList();
    let date: Date = new Date();
    this.startTime = new Date(
      date.getFullYear(),
      date.getMonth(),
      date.getDate()
    ).getTime();
    this.endTime = new Date(
      date.getFullYear(),
      date.getMonth(),
      date.getDate() + 1
    ).getTime();
    Logger.log("created", this.serverList, this.endTime);
    this.changeChannel();
  }

  private getOpenServerTime() {
    if (OpenServerData.open_sever_time == 0) {
      return "开服日期：";
    } else {
      return (
        "开服日期：" + DateUtil.formatDateStr(OpenServerData.open_sever_time)
      );
    }
  }

  private getSummaries(param) {
    const { columns, data } = param;
    const sums = [];
    columns.forEach((column, index) => {
      if (index === 0) {
        sums[index] = "合计";
        return;
      }
      if (index == 1) {
        sums[index] = OpenServerData.getTotalregisterNum();
      } else if (index == 2) {
        sums[index] = OpenServerData.getTotalcreateNum();
      } else if (index == 3) {
        sums[index] = OpenServerData.getTotalloginNum();
      } else if (index == 4) {
        sums[index] = OpenServerData.getTotalchargeMoney();
      } else if (index == 5) {
        sums[index] = OpenServerData.getTotalnewChargePeople();
      } else if (index == 6) {
        sums[index] = OpenServerData.getTotalarpu();
      } else if (index == 7) {
        sums[index] = OpenServerData.getNewChargePercent();
      }
    });

    return sums;
  }

  private objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 7) {
      if (rowIndex == 0) {
        return {
          rowspan: this.listQuery.limit,
          colspan: 1,
        };
      } else {
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    }
  }

  private getShowTime(model: OpenServerData) {
    return (
      DateUtil.formatDateStr3(model.startTime) +
      " " +
      DateUtil.formatHourMinStr(model.startTime) +
      "-" +
      DateUtil.formatHourMinStr(model.endTime)
    );
  }

  private changeDevice() {
    Logger.log("changeDevice==", this.deviceType);
  }

  private onSelectServerListChange() {
    Logger.log("onSelectServerListChange==", this.selectServer);
  }

  private onClearAllServer() {}

  private changeZone() {
    Logger.log("changeZone==", this.zoneId);
  }

  private changeChannel() {
    this.selectServer = null;
    Logger.log("changeChannel=====", this.channelId);
    HttpClient.queryServerAreaList(this.channelId, () => {
      this.serverList = ZoneModel.selectList;
      this.getList();
    });
  }

  private async getList() {
    this.listLoading = true;
    this.list = [];
    OpenServerData.getShowList(
      this.selectServer,
      this.listQuery,
      (result: Array<OpenServerData>) => {
        this.list = result;
        this.total = OpenServerData.totalNum;
        this.listLoading = false;
      }
    );
  }

  private sortChange(data: any) {
    const { prop, order } = data;
    Logger.log("sortChange===", data);
    this.listQuery.page = 1;
    if (prop === "id") {
      if (order === "ascending") {
        this.listQuery.sort = "+id";
      } else {
        this.listQuery.sort = "-id";
      }
      this.getList();
    } else if (prop == "time") {
      if (order === "ascending") {
        this.listQuery.sort = "+time";
      } else {
        this.listQuery.sort = "-time";
      }
      this.getList();
    }
  }

  private handleDownload() {
    this.downloadLoading = true;
    const filterVal = [
      "date",
      "registerNum",
      "createNum",
      "loginNum",
      "chargeMoney",
      "newChargePeople",
      "arpu",
      "newChargePercent",
    ];
    const tHeader = [
      "日期",
      "注册人数",
      "创角数",
      "登录人数",
      "付费金额",
      "新增付费人数",
      "付费arpu",
      "新增付费率",
    ];
    let excelList: Array<object> = [];
    for (let i = 0; i < this.list.length; i++) {
      let obj: object = {};
      obj["date"] = this.getShowTime(this.list[i]);
      obj["registerNum"] = this.list[i].registerNum;
      obj["createNum"] = this.list[i].createNum;
      obj["loginNum"] = this.list[i].loginNum;
      obj["chargeMoney"] = this.list[i].chargeMoney;
      // obj["chargeMoney"] = OpenServerData.getTotalchargeMoney()
      // obj["newChargePeople"] = OpenServerData.getTotalnewChargePeople()
      obj["newChargePeople"] = this.list[i].newChargePeople;
      // obj["arpu"] = OpenServerData.getTotalarpu()
      obj["arpu"] = this.list[i].arpu;
      // obj["newChargePercent"] = OpenServerData.getNewChargePercent()
      obj["newChargePercent"] = "每小时不需统计";
      excelList[i] = obj;
    }
    const data = formatJson(filterVal, excelList);
    let complex: Array<any> = [
      "合计",
      OpenServerData.getTotalNewDevice(),
      OpenServerData.getTotalregisterNum(),
      OpenServerData.getTotalcreateNum(),
      OpenServerData.getTotalloginNum(),
      OpenServerData.getTotalchargeMoney(),
      OpenServerData.getTotalnewChargePeople(),
      OpenServerData.getTotalarpu(),
      OpenServerData.getNewChargePercent(),
    ];
    data.push(complex);
    // data.unshift(["开服日期:"]);
    Logger.log("handleDownload====", data);
    exportJson2Excel(tHeader, data, "开服当天数据");
    this.downloadLoading = false;
  }
}
</script>
